<template>
  <div class="tabapp">
    <div class="header">
      <div style="float: left">
        创建时间 &emsp;
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始"
          end-placeholder="结束"
        />
        &emsp; 车次类型
        <el-select v-model="value" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div
        style="
          float: right;
          display: flex;
          margin-top: 15px;
          margin-right: 15px;
        "
      >
        <el-checkbox label="启用" />
        <el-input
          v-model="input"
          :prefix-icon="Search"
          style="width: 130px; margin: 0 20px"
          placeholder="搜索ID/车次"
        />
        <el-button size="large" color="#1ba9ba" @click="add">
          <img
            src="@/assets/Icons/png/新建白色.png"
            style="width: 30px"
            alt=""
          />
          <span style="color: white; margin-left: 3px">新增车次</span>
        </el-button>
      </div>
    </div>
    <div style="width: 100%">
      <MyTable
        @fatherdelete="deleterow"
        @fatherset="setflag"
        @fatheredit="edit"
        :table-data="linedata"
        :column-data="coldata"
      ></MyTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyTable from "@/components/MyTable.vue";
import { Search } from "@element-plus/icons-vue";
import { linecount, useCounterStore } from "@/store/counter";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
]);
const input = ref("");
const value = ref("全部");
const options = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "高速动车",
  },
  {
    value: "Option3",
    label: "火车",
  },
];
const coldata = [
{
    prop: "id",
    label: "ID",
    width: "",
  },
  {
    prop: "train",
    label: "车次/类型",
    width: "",
  },
  {
    prop: "startStation",
    label: "",
    width: "",
  },
  {
    prop: "lines",
    label: "线路",
    width: "lines",
  },
  {
    prop: "create_time",
    label: "创建时间",
    width: "lines",
  },
]
const store = useCounterStore();
const { linedata } = storeToRefs(store);
const add =()=>{

}
const deleterow = (row: linecount) => {
  console.log(row);
  store.linedelete(row.id);
};
const setflag = (row: linecount) => {
  console.log(row);
  store.linesetflag(row.id);
};
const edit = (row: linecount) => {
  console.log(row);
};
</script>

<style scoped>
.tabapp {
  width: calc(100% - 20px);
  height: calc(100vh - 80px);
  margin-left: 10px;
  margin-top: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
  border-radius: 2px;
  border: 1px solid #ccc;
}
.header {
  width: 100%;
  height: 110px;
  line-height: 66px;
  padding: 30px 20px;
  overflow: hidden;
}
</style>
